<template>
  <div class="module">
    <div class="title">本次切换环境统计</div>
    <div class="wrap">
      <div class="item" :style="{ width: `${100 / list.length}%` }" v-for="item in list" :key="item.label">
        <div class="num">{{ item.num }}</div>
        <div class="label">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import FontNum from '@/components/FontNum'
export default {
  components: {
    FontNum
  },
  data() {
    return {
      list: [
        { label: '主机数量', num: '2,2190' },
        { label: '存储数量', num: '190' },
        { label: '数据库数量', num: '3,001' },
        { label: '应用数量', num: '108' }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.module{
  width: 100%;
  height: 100%;
  .title{
    height: 36px;
    line-height: 36px;
    text-align: left;
    padding-left: 17.6px;
    font-size: 12.3px;
    color: #fff;
  }
  .wrap{
    font-size: 0;
    padding: 0 20px;
    .item{
      display: inline-block;
      height: 78px;
      padding-top: 22px;
      .num{
        font-family: 'DIN-Alternate-Bold';
        font-size: 21.5px;
        line-height: 1;
        margin-bottom: 9px;
        color: rgba(59, 230, 255, 1);
      }
      .label{
        font-size: 10.75px;
        line-height: 1;
        color: rgba(3, 187, 255, 1);
      }
    }
  }
}
</style>
